<script setup lang="ts">
import { debounce } from 'lodash';


const handleResize = debounce(() => {
  const screenWidth = window.innerWidth;
  let navs = document.getElementById("navs");
  if (screenWidth <= 768 && navs.style.display === "flex") {
    navs.style.display = "none";
  }
  if (screenWidth >= 768 && navs.style.display === "none") {
    navs.style.display = "flex";
  }
  // 在这里你可以根据新的屏幕宽度做一些操作
}, 500); // 这里的 200 是等待时间，单位是毫秒

window.addEventListener('resize', handleResize);


function unfoldHead() {
  let navs = document.getElementById("navs");
  if(navs.style.display === "none" || navs.style.display === ''){
    navs.style.display = "flex";
  } else {
    navs.style.display = "none";
  }
}
</script>

<template>
  <nav class="navbar">
    <div class="ml-10 d-flex">
      <img class="avatar shadow-0 img-fluid rounded-circle" src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
      <div class="p-2 fs-4 fw-bolder">JackPay</div>
    </div>
    <div class="fold" @click="unfoldHead()">
      <img class="avatar shadow-0 img-fluid rounded-circle" src="https://cdn.iextend.top/pay/svg/hamburger-button.svg"/>
    </div>
    <ul class="navbar-nav" id="navs">
      <div class="router-list">
        <li class="nav-item">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">文档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">控制台</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">技术支持</a>
        </li>
      </div>
    </ul>
  </nav>
</template>


<style>
.navbar {
  color: #2F80ED;
}

.avatar {
  width: 45px;
  height: 45px;
}

.nav-item a{
  color: #2F80ED;
  font-size: 16px;
  font-weight: bold;
}

.nav-item a:hover {
  cursor: pointer;
  color: red;
}
.fold:hover{
  background: #f1f1f1;
  cursor: pointer;
  transform: scale(1.2);
}




@media (min-width: 768px) {
  #navs {
    width: 40%;
    display: block;
  }
  .fold {
    display: none;
  }
  .router-list {
    display: flex;

  }
  .nav-item {
    width: 25%;
    text-align: center;
  }
}
/* 媒体查询 */
@media (max-width: 768px) {
  #navs {
    display: none;
  }
  .fold {
    width: 35px;
    height: 35px;
    margin-right: 12px;
    display: block;
  }
  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .router-list{
    width: 100%;
  }
  .nav-item {
    width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
  }
  .nav-item:hover {
    background-color: #f1f1f1;
    transform: scale(1.2);
    cursor: pointer;
  }
}
</style >
